<template>
  <div class="box"
      :style="bgImg">
      <el-card class="card">
        <div slot="header" class="biaoti" >登录</div>
        <el-form :model="user1" :rules="rules" ref="loginForm" class="demo-ruleForm">
          <el-form-item label="账号" prop="account" >
            <el-input  v-model="user1.account" style="width: 210px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user1.password" style="width: 210px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="$router.push('/register')">去注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>

  </div>

</template>

<script>
// import admin from "@/admin/admin";

export default {
  name: "login" ,
  data() {
   return{
     user1:{},
     bgImg:{
       backgroundImage:'url('+require('@/assets/dl.jpg')
     },
     rules:{
       account:[
         {required: true, message:'请输入账号！',trigger:'blur'}
       ],
       password:[
         {required: true,message:'请输入密码',trigger:'blur'},
         {min:1,max:32,message: '长度在1到32个字符',trigger: 'blur'}
       ],
     }
   }
   },
  methods:{
    login(){
      this.$refs.loginForm.validate((r) => {
        if (r){
          this.$axios.post('/api/user/login',this.user1).then(res =>{
            alert(res.data.msg);
            if (res.data.status === 1 && res.data.data.account === 'admin'){
              this.$router.push('/admin');

            }else if (res.data.status === 1){
              localStorage.setItem('TOKEN', res.data.data.token);
              this.$router.push('/indexes');
            }else {
              this.$message.error("登陆失败")
            }

            console.log(res);

          })
        }else {
          this.$message.warning('请填完信息后再登录');
        }
      })
    }


  }

}
</script>

<style scoped>
.box{
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  margin: 0;

}
.biaoti{
  font-size: 2em;
}

.demo-ruleForm{
width: 400px;
  margin:0 auto;
}
.card{
 width: 600px;
  height: 400px;
  margin:150px auto;
  background-color: rgba(35, 31, 31, 0.5);

}



</style>